<template>
  <div class="login-body">
    <div class="login-logo">
      <img src="@/assets/img/login_logo.png" alt=""/>
    </div>

    <h2 class="form-heading">login</h2>
    <div class="container log-row">
      <form class="form-signin" ref="loginForm" :model="loginForm">
        <div class="login-wrap">
          <input v-model="loginForm.username" type="text" class="form-control" placeholder="User ID" autofocus>
          <input v-model="loginForm.password" type="password" class="form-control" placeholder="Password">
          <button class="btn btn-lg btn-success btn-block" @click="handleLogin">LOGIN</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
  import '@/assets/css/style-responsive.css'
  import '@/assets/css/style.css'

  export default {
    name: "Login",
    //创建前设置
    beforeCreate() {
      document.querySelector('body').setAttribute('class', 'login-body')
    },
    data() {
      return {
        notice: 'This is a login form',
        loginForm: {
          username: '',
          password: '',
        }
      }
    },
    methods: {
      handleLogin() {
        console.log(this.loginForm.username)
        console.log(this.loginForm.password)
        console.log(111)

        // 开始去后端校验 pass

        this.$router.push({
          path: '/dashboard'
        }).then(function () {
          console.log("error")
        })
      }
    },

    //销毁前清除
    beforeDestroy() {
      document.querySelector('body').removeAttribute('class')
    },
  }

</script>

